<template>
  <Layout :name="'断面水位'">
    <!-- 选项区域 -->
    <div class="station-select">
      <span class="station-title">当前显示站点:&nbsp;</span>
      <el-select 
        v-model="station" 
        placeholder="Select" 
        style="width: 120px"
        @change="handleDemStationHandle"
      >
        <el-option
          v-for="item in stationData"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        />
      </el-select>
      <div class="split"></div>
      <div class="date">{{ nowDate }}</div>
    </div>
    <!-- echartsDom -->
    <div id="dem"></div>
  </Layout>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from "vue";
  import Layout from '../layout.vue';
  import { dayjs } from 'element-plus';
  import * as echarts from 'echarts';
  import { duanMianData } from '../filePath';

  const props = defineProps(['stationData']);

  // 站点选择
  const station = ref('60115000');
  const nowDate = ref(dayjs(new Date()).format('YYYY-MM'));
  // 获取初始断面的数据
  const xData = ref<number[]>([]);
  const yData = ref<number[]>([]);
  duanMianData[0].tableData.map(item => {
    xData.value.push(item.qdj);
    yData.value.push(item.hdgc);
  });
  // 水位值
  const markLineValue = ref<number>(duanMianData[0].shuiwei);
  // 零值
  const zeroData = ref<number[]>([]);
  // 图表配置
  let lineDom: HTMLElement | null = null;
  let charts: any = null;
  // 断面土地: #E1C351 断面水面颜色: #55B1E3
  const renderChart = () => {

    if(charts != undefined || charts != null) {
      charts.dispose();
    }
    
    yData.value.forEach((val) => {
      if (val > markLineValue.value) {
        zeroData.value.push(markLineValue.value);
      } else {
        zeroData.value.push(val);
      }
    });

    lineDom = document.getElementById("dem");
    charts = echarts.init(lineDom);
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        top: '10%',
        bottom: '18%',
        left: '16%',
        right: '2%'
      },
      xAxis: {
        name: '起点距(m)',
        type: 'category',
        nameLocation: 'center',
        nameGap: 22,
        axisLine: {
          lineStyle: {
            color: '#ffffff'
          }
        },
        axisLabel: {
          show: true,
          color: '#ffffff'
        },
        axisTick: {
          show: false,
        },
        data: xData.value
      },
      yAxis: {
        name: '河底高程(m)',
        nameLocation: 'center',
        nameGap: 35,
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#ffffff'
          }
        },
        axisLabel: {
          color: '#ffffff'
        }
      },
      series: [
        {
          name: '河底高程',
          type: 'line',
          smooth: true,
          lineStyle: {
            type: 'solid',
            color: '#E1C351'
          },
          symbol: 'none',
          areaStyle: {
            color: '#E1C351',
            origin: 'start'
          },
          data: yData.value
        },
        {
          name: "水位",
          type: "line",
          symbol: 'none',
          emphasis: {
            focus: "series",
          },
          lineStyle: {
            color: '#55B1E3'
          },
          areaStyle: {
            color: '#55B1E3',
            origin: markLineValue.value
          },
          data: zeroData.value
        }
      ]
    };
    option && charts.setOption(option);
  }

  const handleDemStationHandle = (val: string) => {
    const target = props.stationData.find((item: any) => item.code == val);
    const obj = duanMianData.find((item: any) => item.ly == target.ly);

    console.log('断面站点变化');
    console.log(obj);
    console.log(val);
    console.log(target.ly);
    
    zeroData.value = [];
    xData.value = [];
    yData.value = [];

    markLineValue.value = obj!.shuiwei;
    obj!.tableData.map(item => {
      xData.value.push(item.qdj);
      yData.value.push(item.hdgc);
    });

    renderChart();
  }

  onMounted(() => {
    renderChart();
  })
</script>

<style lang="less" scoped>
  .station-select {
    width: 92%;
    margin: 10px auto 10px auto;
    box-sizing: border-box;
    padding-left: 10px;
    display: flex;
    align-items: center;
    .station-title {
      display: inline-block;
      margin-right: 15px;
      color: #ffffff;
      font-size: 16px;
    }
    .el-select {
      :deep(.el-select__wrapper) {
        background: transparent;
        box-shadow: none;
        .el-select__selected-item {
          color: #F2C41A;
          font-size: 18px;
        }
        .el-select__caret {
          color: #F2C41A;
        }
      }
    }
    .split {
      width: 1px;
      height: 22px;
      margin-left: 22px;
      background-color: #ffffff;
    }
    .date {
      color: #04C7DF;
      font-size: 16px;
      text-indent: 24px;
    }
  }
  #dem {
    width: 92%;
    height: 187px;
    margin: 0 auto;
  }
</style>